<template>
    <div
        class="case-view"
        :class="[
            'is-' + type,
            {
                black: key == 'url',
            },
        ]"
    >
        <iframe :src="detail[key]" v-if="type == 'iframe'"></iframe>
        <img :src="detail[key]" v-else-if="type == 'image'" />
        <video
            v-else-if="type == 'video'"
            id="player"
            :src="detail[key]"
            :muted="false"
            :controls="false"
            autoplay
        ></video>
    </div>
    <div class="watermark" v-if="key == 'url'"></div>
</template>
<script setup>
import Plyr from "plyr";
import "plyr/dist/plyr.css";
const route = useRoute();
const key = route.query.key || "url";
import { useContent } from "./index.js";

const { type, detail, GetDetail } = useContent(key);

await GetDetail();

useSeoMeta({
    title: detail.value.name + "_北京华锐云空间",
});

onMounted(async () => {
    new Plyr("#player", {
        autoplay: true,
        settings: [],
        controls: [
            "play-large",
            "play",
            "progress",
            "current-time",
            "mute",
            "volume",
            "fullscreen",
        ],
    });
});
</script>
<style lang="scss">
:root {
    --plyr-color-main: rgba(0, 0, 0, 0.5);
}
</style>
<style lang="scss" scoped>
.case-view {
    position: relative;
    width: 100vw;
    height: 100vh;
    background-color: #000;
    overflow: auto;

    &.black {
        background-color: #000;
    }

    iframe {
        width: 100%;
        height: 100%;
        border: none;
        /* 防止用户拖动 */
        position: fixed;
        top: 0;
        left: 0;
        /* 防止页面滚动 */
        overflow: hidden;
    }

    img {
        position: absolute;
        left: 50%;
        top: 50%;
        max-width: 100%;
        transform: translate(-50%, -50%);
    }

    &.is-video {
        overflow: hidden;
    }

    video {
        width: 100vw;
        height: 100vh;
    }

    :deep(.plyr__control--overlaid) {
        padding: 24px;
        // backdrop-filter: blur(4px);

        svg {
            width: 40px;
            height: 40px;
        }
    }
}

.watermark {
    width: 100vw;
    height: 100vh;
    position: fixed;
    left: 0;
    top: 0;
    z-index: 999;
    background: url("https://yzpt-resources.oss-cn-hangzhou.aliyuncs.com/web/images/watermark-3.png")
        left top;
    background-size: cover;
    pointer-events: none;
}
</style>
